var officeForRentCom = Vue.extend({

    data() {
        return {
            houseList:[],
        };
    },
    mounted: function() {
        this.$nextTick(function() {//this.TouchSlide();
            this.fetchHouseData();
            this.propertyForRentSlider();
        });
    },
    methods: {
        fetchHouseData(){
            //var _this=this;
            this.houseList = JSON.parse(localStorage.getItem('house'));

        },
        propertyForRentSlider(){
            $('#property-for-rent-slider').slick({
                slidesToShow: 3,
                slidesToScroll: 1,
                dots: false,
                infinite: true,
                autoplay: true,
                speed: 1000,
                autoplaySpeed: 2000,
                prevArrow: '<i class="fa fa-angle-left"></i>',
                nextArrow: '<i class="fa fa-angle-right"></i>',
                responsive: [
                    {
                        breakpoint: 1200,
                        settings: {
                            slidesToShow: 2
                        }
                    },
                    {
                        breakpoint: 767,
                        settings: {
                            arrows: false,
                            slidesToShow: 2
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            arrows: false,
                            slidesToShow: 1
                        }
                    }
                ]
            });
        },
    },
    props: [''],
    template: '\
<section id="home-property-for-rent-listing">\
    <header class="section-header home-section-header text-center">\
        <div class="container">\
            <h2 class="wow slideInLeft">Office For Rent</h2>\
            <p class="wow slideInRight">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut <br>\
                labore et dolore magna aliquan ut enim ad minim veniam.</p>\
        </div>\
    </header>\
    <div class="container">\
        <div class="row">\
            <div id="property-for-rent-slider">\
                <div class="col-lg-4 col-md-6" v-for="(item,index) in houseList" v-if="item.types == \'office\'">\
                    <article class="property clearfix">\
                        <figure class="feature-image">\
                            <router-link class="clearfix" :to="\'/goodsDetail/\' + index" ><img v-bind:src="item.imgUrl" alt="Property Image"></router-link>\
                        </figure>\
                        <div class="property-contents">\
                            <header class="property-header clearfix">\
                                <div class="pull-left">\
                                    <h6 class="entry-title"><router-link :to="\'/goodsDetail/\' + index" >{{item.title}}</router-link></h6>\
                                    <span class="property-location"><i class="fa fa-map-marker"></i> {{item.address}}</span>\
                                </div>\
                                <button class="btn btn-primary btn-price pull-right btn-3d" v-bind:data-hover="item.price | currency"><strong>{{item.price | currency}}</strong></button>\
                            </header>\
                            <div class="property-meta clearfix">\
                                <span><i class="fa fa-arrows-alt"></i> {{item.size}} SqFt</span>\
                                <span><i class="fa fa-bed"></i> {{item.bed}} Beds</span>\
                                <span><i class="fa fa-bathtub"></i> {{item.toilet}} Baths</span>\
                                <span><i class="fa fa-cab"></i> Yes</span>\
                            </div>\
                        </div>\
                    </article>\
                </div>\
            </div>\
        </div>\
    </div>\
</section>\
',

});
